<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: younghxp
 * @Date: 2020-07-24 14:15:26
 * @LastEditors: younghxp
 * @LastEditTime: 2021-12-09 12:02:02
-->
<template>
  <div>
    <el-row>
      <el-col class="topTitle">
        <el-steps :active="activeIndex" finish-status="success" align-center>
          <el-step title="生成工资表"></el-step>
          <el-step title="编辑工资表"></el-step>
          <el-step title="上报并发放工资"></el-step>
        </el-steps>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  //搜索条件
  props: ['activeIndex'],
  mounted() {},
  computed: {},
  methods: {},
}
</script>
<style scoped lang="less">
.el-steps {
  background: #fff;
  padding: 20px 0;
  margin: 0 24px;
}
/* 步骤条 */
.topTitle /deep/ .el-step__head.is-process {
  color: #fff;
  .el-step__icon.is-text {
    border: 2px solid #009588;
    background: #009588;
  }
}

.topTitle /deep/ .el-step__head.is-success,
.topTitle /deep/ .el-step__title.is-success {
  color: #009588;
}

.topTitle /deep/ .el-step__head.is-success .el-step__icon.is-text {
  border-color: #009588;
}

.topTitle /deep/ .el-step__head.is-success .el-step__line {
  background-color: #009588;
  border-color: #009588;
}

.topTitle /deep/ .el-step__title.is-process {
  color: #009588;
}
</style>
